<template>
  <div>
    <!-- 树形菜单 -->
    <el-aside
      width="180px"
      style="background-color: rgb(238, 241, 246); background: #fff"
    >
      <el-menu :default-openeds="['1', '3']">
        <el-tree
          :data="tree_list"
          default-expand-all="true"
          :props="{
            checkStrictly: true,
            label: 'areaName',
            value: 'areaCode',
          }"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// import { fetchData } from "../../api/index";
import { useRouter, useRoute } from "vue-router";
import api from "../api/api";
export default {
  name: "basetable",
  setup(props, ctx) {
    const router = useRouter();
    const route = useRoute();
    const tree_list = ref([]);
    const getareaTree = () => {
    setTimeout(() => {
          api
        .getListAPI("backup/area/areaTree", {})
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            // tree_list.value = res.data.data;
            var treelist = res.data.data;
            bbq: for (var i = 0; i < treelist.length; i++) {
              ccc: for (var j = 0; j < treelist[i].child.length; j++) {
                ddd: for (
                  var z = 0;
                  z < treelist[i].child[j].child.length;
                  z++
                ) {
                  if (treelist[i].areaCode.length == 6) {
                    tree_list.value.push(treelist[i]);
                    break ccc;
                    break ddd;
                  } else if (treelist[i].child[j].areaCode.length == 6) {
                    tree_list.value.push(treelist[i].child[j]);
                    break ddd;
                  } else if (
                    treelist[i].child[j].child[z].areaCode.length == 6
                  ) {
                    tree_list.value.push(treelist[i].child[j].child[z]);
                  }
                
                }
              }
            }
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => {});
    },10);
      setTimeout(() => {
          getareaTreeList(tree_list.value) ;
      },5000);
    };
    getareaTree();
    const getareaTreeList = (list) => {
        console.log(list)
      return list;
    };
    const handleNodeClick = (res) => {
      ctx.emit("handle", res);
    };
    return {
      tree_list,
      getareaTreeList,
      handleNodeClick,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";
// .content {
//   background: #fff;
// }
.exportbtn {
  width: 80px;
  margin-bottom: 20px;
}
.exportbtn1 {
  margin-left: 70px;
}
.content_info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}
.info {
  /* width:150px; */
  text-align: center;
  padding: 2px 5px;
  margin-right: 30px;
  margin-top: 20px;
}
.select_info {
  /* width:150px; */
  text-align: center;
  padding: 2px 5px;
  margin-right: 30px;
  margin-top: 20px;
  border: 1px solid #999999;
  border-radius: 5px;
}
.el-overlay1 {
  background-color: none !important;
}
.el-menu {
  border-right: none;
}
&:deep(.el-tree-node__content) {
  height: 60px;
  line-height: 60px;
  font-size: 24px;
}
</style>
